<template>
	<div class="pancel">
		<div class="content">
			<div class="store-header">
				<div class="tags nowrap">
					<span class="tag-item"
						v-if="info.land_use_type_code">{{ lr_dataItemName(landUseOptions,info.land_use_type_code ) || '---' }}</span>
					<span class="tag-item small"
						v-if="info.stage_code">{{ lr_dataItemName(stageCodeOptions,info.stage_code) || '---' }}</span>
					<span class="tag-item small"
						v-if="info.industrial_update_code">{{ lr_dataItemName(industrialUpdateCodeOptions,info.industrial_update_code) || '---' }}</span>
				</div>

				<span class="store-name" :title="info.name">{{info.name}}</span>
			</div>
			<span class="stroe-card">
				<span class="card-score">
					<span>亩均税收(万元/亩)：</span>
					<span class="score-num">{{info.mu_tax}}</span>
				</span>
				<div class="card-score">
					<span>地址：</span>
					<span class="score-num">{{info.address || '---'}}</span>
				</div>
			</span>
		</div>
	</div>
</template>

<script>
export default {
	components: {},
	props: ['info'],
	data() {
		return {
		};
	},
	watch: {},
	computed: {
		landUseOptions() { // 用地类型
			return this.lr_dataItemOptions(this.lr_dataItem['land_use_type_code'])
		},
		stageCodeOptions() { // 更新进度
			return this.lr_dataItemOptions(this.lr_dataItem['stage_code'])
		},
		industrialUpdateCodeOptions() { // 更新方式
			return this.lr_dataItemOptions(this.lr_dataItem['industrial_update_code'])
		},
	},
	created() { },
	mounted() {
		this.init()
	},
	methods: {
		init() { },
	}
};
</script>
<style lang="scss" scoped>
.pancel {
	//  background-color: #fff;
	width: 100%;

	.content {
		font-size: 14px;
		display: flex;
		flex-direction: column;
		width: 100%;
		color: #fff;

		> div,
		> span {
			margin-top: 5px;
			margin-left: 7px;
		}

		.store-header {
			display: flex;

			.store-tag {
				display: block;
				padding: 1px 4px;
				background: #006cff;
				// width: 69px;
				text-align: center;
				border-radius: 4px;

				&.tag-name {
					margin-left: 5px;
					background: rgba(25, 190, 107, 0.4);
					color: #19be6b;
				}
			}
		}

		.store-name {
			font-size: 16px;
			// font-weight: 600;
			margin-left: 10px;
		}

		.store-address {
			font-size: 12px;
			font-family: AppleSystemUIFont;
			color: rgba(255, 255, 255, 0.8);
			max-width: 220px;
			//超出部分隐藏
			overflow: hidden;
			//当存在overflow：hidden时，该属性才生效（效果，超出部分显示省略号）
			text-overflow: ellipsis;
			//永不换行
			white-space: nowrap;
			margin-left: 13px;
		}

		.name-tag {
			margin-left: 15px;

			img {
				width: 18px;
			}
		}

		.stroe-card {
			// background: #7291b9c4;
			padding: 6px;
			border-radius: 5px;
			color: #ffffff;
			font-size: 13px;
			width: calc(100% - 12px);
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.card-score {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				flex-direction: row;

				> span {
					line-height: 22px;
				}
			}

			.score-num {
				font-size: 14px;
				// font-weight: 900;
			}
		}

		.store-detail {
			position: absolute;
			right: 0;
			bottom: 0;
			cursor: pointer;
			color: #0086ffc9;
		}
	}
}
</style>